<!--折线图-->
<template>
  <div class="instrument-part w-full h-full" ref="instrumentPart"></div>
</template>

<script lang="ts" setup>
import {defineComponent, markRaw, onMounted, onBeforeUnmount, ref, watch} from 'vue';
import * as echarts from 'echarts';
import {sleep} from '@/utils/sleep';

defineComponent({name: 'InstrumentPart'});

const props = defineProps({
  echartsData: {
    type: Number,
    default: 0
  }
});

const instrumentPart = ref();
const myChart = ref<any>(null);

function initEcharts() {
  // 标记一个对象，使其永远不会再成为响应式对象
  myChart.value = markRaw(echarts.init(instrumentPart.value));

  const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    {
      offset: 0,
      color: "#5CF9FE", // 0% 处的颜色
    },
    {
      offset: 0.17,
      color: "#468EFD", // 100% 处的颜色
    },
    {
      offset: 0.9,
      color: "#468EFD", // 100% 处的颜色
    },
    {
      offset: 1,
      color: "#5CF9FE", // 100% 处的颜色
    },
  ]);

  const colorSet = [
    [0.91, color],
    [1, "#15337C"],
  ];

  const option = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%',
      backgroundColor: 'rgba(0,150,236,0.6)',
      textStyle: {
        color: '#fff',
      },
    },
    series: [
      {
        name: 'Pressure',
        type: 'gauge',
        progress: {
          show: true
        },
        radius: '100%',
        detail: {
          valueAnimation: true,
          formatter: ' ',
          color: '#fff'
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false
        },
        axisTick: {
          lineStyle: {
            // 属性lineStyle控制线条样式
            width: 3,
            color: '#2670B0'
          },
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#2670B0", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#A5D6FF", // 100% 处的颜色
            },
          ]),
          shadowColor: 'rgba(0,138,255,0.45)',
          shadowBlur: 10,
          shadowOffsetX: 2,
          shadowOffsetY: 2
        },
        data: [
          {
            value: props.echartsData,
            name: '',

          }
        ]
      },
      {
        type: "gauge",
        name: "外层辅助",
        radius: "53%",
        startAngle: "225",
        endAngle: "-45",
        splitNumber: "100",
        pointer: {
          show: false,
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 1,
          },
        ],
        // data: [{value: 1, name: 90}],
        title: {
          show: true,
          offsetCenter: [0, 30],
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontFamily: "微软雅黑",
            fontSize: 20,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: [[1, 'rgba(165, 214, 255, 1)']],
            width: 2,
            opacity: 1,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          length: 20,
          lineStyle: {
            color: "#051932",
            width: 0,
            type: "solid",
          },
        },
        axisLabel: {
          show: false,
        },
      },

    ]
  };
  myChart.value.setOption(option, true);
  window.addEventListener('resize', () => {
    if (myChart.value) myChart.value.resize();
  });
}

function destroyEcharts() {
  if (myChart.value) {
    myChart.value.dispose();
    myChart.value = null;
  }
}

onMounted(() => {
  watch(
      () => props.echartsData,
      async () => {
        destroyEcharts();
        await sleep(500);
        if (instrumentPart.value) initEcharts();
      },
      {immediate: true, deep: true}
  );
});

onBeforeUnmount(() => {
  destroyEcharts();
});
</script>

<style scoped></style>
